<template>
  <div>
    <header>
      <div class="space-between header-box">
        <a href="/" class="logo">
          <img class="logo-img" src="../assets/images/logo.png" alt />
        </a>
        <div class="right hedewr-phone-riht">
          <div class="menu header-a-page">
            <a href="/Charts">排行榜</a>
            <a href="/announce">活动公告</a>
            <a href="/creation_center">创作中心</a>
          </div>
          <div class="search">
            <el-input
              class="search-input"
              v-model="input1"
              style="width: 240px"
              size="large"
              placeholder="搜索作品关键字"
              :prefix-icon="Search"
              @click="searchAction"
            />
          </div>
          <div class="button-list">
            <el-icon :size="24" class="search-icon">
              <Search />
            </el-icon>
            <!-- <el-icon :size="24" class="edit-icon"><Edit /></el-icon> -->
            <div>
              <img
                @click="rightActionHref('/announce')"
                src="../assets/images/message.png"
                class="message-icon"
              />
              <div class="piont-message"></div>
            </div>

            <div @click="rightAction()" v-if="loginActionShow" class="user-head">
              <img src alt />
            </div>
            <div class="chongxing-login-btn" v-else @click="loginAction()">登录/注册</div>
          </div>
        </div>
      </div>
    </header>
    <el-drawer
      class="custom-drawer"
      :size="'70%'"
      v-model="drawerVisible"
      direction="rtl"
      :with-header="false"
      :show-close="true"
    >
      <div class="avatar-box">
        <el-avatar :size="74" />
        <span>{{ nickname }}</span>
      </div>
      <nav>
        <ul>
          <li @click="rightActionHref('/user')">
            <div>
              <!-- <img class="count-img" src="../assets/images/setting.png" alt /> -->

              <span>个人设定</span>
            </div>
          </li>
          <li @click="rightActionHref('/collection')">
            <div>
              <!-- <img class="count-img" src="../assets/images/wujue.png" alt /> -->

              <span>我的收藏</span>
            </div>
          </li>
          <li @click="rightActionHref('/creation_center')">
            <div>
              <!-- <img class="count-img" src="../assets/images/book.png" alt /> -->

              <span>创作中心</span>
            </div>
          </li>
          <li @click="loginOut()">
            <div>
              <!-- <img class="count-img" src="../assets/images/close.png" alt /> -->

              <span>退出登录</span>
            </div>
          </li>
        </ul>
      </nav>
    </el-drawer>
  </div>
</template>

<script setup>
import { logout, getInfo } from "@/api/login";
import { showConfirmDialog } from "vant";
import { ref, onMounted } from "vue";
import { getToken } from "@/utils/auth";
import { Search, ChatDotSquare, Edit } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const input1 = ref("");
const nickname = ref("");

const drawerVisible = ref(false);
const loginActionShow = ref(getToken());
const searchAction = () => {
  router.push("/search");
};
const loginAction = () => {
  loginActionShow.value = false;
};

const rightAction = () => {
  drawerVisible.value = true;
};

const rightActionHref = href => {
  router.push(href);
};
const getInfoData = async () => {
  const res = await getInfo();
  if (res.code == 200) {
    nickname.value = res.data.nickname;
  }
};

onMounted(() => {
  getInfoData();
});

const loginOut = async () => {
  drawerVisible.value = false;
  try {
    // 显示对话框，等待用户操作
    await showConfirmDialog({
      title: "退出登录",
      message: "确定退出登录?",
      confirmButtonText: "确认",
      cancelButtonText: "取消"
    });
    const res = await logout();
    if (res.code == 200) {
      router.push("/login");
    }
  } catch (error) {
    // 如果用户点击取消或关闭对话框，执行这里的逻辑
    console.log("用户取消了操作");
  }
};
</script>
<style lang="scss" scoped>
.piont-message {
  background-color: #fc8775;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  margin-left: 40px;
  margin-top: 18px;
  position: absolute;
  top: 0;
}

.logo-img {
  width: 3rem;
}

img {
  display: block;
  max-width: 100%;
}

header {
  width: 100%;
  height: 4rem;
  display: flex;
  flex: row nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: var(--theme-ui-colors-background);
  z-index: 30;

  .logo {
    display: flex;
    width: 4rem;
    height: 4rem;
    align-items: center;
    justify-content: center;
  }

  .right {
    display: flex;
    flex-grow: 1;
    gap: 0rem;

    .menu {
      display: flex;
      flex: 1 0 auto;
      align-items: center;
      gap: 1rem;

      :deep(.el-link) {
        display: none;
        border-radius: 4px;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.05em;
        color: var(--theme-ui-colors-gray-8);
        background-color: transparent;
        height: 3rem;
        padding: 0rem;
      }
    }

    .search {
      display: flex;
      flex: 1 1 auto;
      max-width: 15rem;
      display: none;
      margin-top: 5px;

      .search-input {
        :deep(.el-input__wrapper) {
          display: flex;
          width: 100%;
          height: 3rem;
          border-radius: 0.25rem;
          border-width: 1px;
          border-style: solid;
          border-color: var(--theme-ui-colors-gray-1);
          align-items: center;
          background-color: var(--theme-ui-colors-gray-1);
          height: 3rem;
          box-shadow: 0 0 0 1px #f8f8f8 inset;

          &.is-focus {
            box-shadow: 0 0 0 1px var(--theme-ui-colors-primary) inset;
          }
        }

        input {
          font-size: 0.875rem;
          font-weight: 400;
          line-height: 2;
          letter-spacing: 0.05em;
          color: var(--theme-ui-colors-gray-8);
          width: 100%;
        }
      }
    }

    .button-list {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 0.5rem;

      :deep(.el-icon) {
        padding: 0.25rem;
        border-radius: 4px;
        width: 3rem;
        height: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
      }
    }
  }
}

.user-head {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  width: 2.5rem;
  height: 2.5rem;
  border-style: solid;
  border-width: 0.0625rem;
  border-color: var(--theme-ui-colors-gray-5);
  background-color: var(--theme-ui-colors-gray-5);
  top: 3px;
}

.avatar-box {
  padding: 1rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

nav {
  ul {
    padding: 1rem;

    li {
      div {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.05em;
        color: #2d3748;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        width: 100%;
        height: 3rem;
        gap: 1rem;
      }
    }
  }
}

:deep(.el-drawer__header) {
  margin-bottom: 0;
}

@media (max-width: 680px) {
  header {
    .left {
      .menu {
        display: none;
      }
    }

    .right {
      .search {
        display: none;
      }

      .search-icon {
        display: block;
      }

      .edit-icon {
        display: block;
      }
    }
  }
}

@media screen and (min-width: 640px) {
  header {
    .right {
      gap: 0.5rem;

      .menu {
        :deep(.el-link) {
          display: flex;
        }
      }

      .search {
        display: flex !important;
      }

      .search-icon {
        display: none !important;
      }

      .edit-icon {
        display: none !important;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  header {
    .right {
      gap: 1rem;
    }
  }
}

.message-icon {
  width: 30px;
  height: 30px;
  margin: 0 20px;
}

.chongxing-login-btn {
  background-color: #fc8775;
  border-radius: 30px;
  color: white;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 5px 25px;
}
</style>